import { SnackbarProvider } from 'notistack';
import React, { useState, createContext } from 'react'
import Router from '../router/Router'
// import reactLogo from './assets/react.svg'
// import viteLogo from '/vite.svg'

import Modal from '@mui/material/Modal';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';


export const EchoContext = createContext({})


const style = {
  position: 'absolute',
  top: '50%',
  left: '50%',
  transform: 'translate(-50%, -50%)',
  width: 400,
  bgcolor: 'background.paper',
  border: '2px solid #000',
  boxShadow: 24,
  p: 4,
}

function BasicModal(props) {
  const { open, title, message } = props

  return (
    <div>
      <Modal
        open={open}
        // onClose={onClose}
        aria-labelledby="modal-modal-title"
        aria-describedby="modal-modal-description"
      >
        <Box sx={style}>
          <Typography id="modal-modal-title" variant="h6" component="h2">
            {title}
          </Typography>
          <Typography id="modal-modal-description" sx={{ mt: 2 }}>
            {message}
          </Typography>
        </Box>
      </Modal>
    </div>
  )
}





function App1() {

  const [modalTitle, setModalTitle] = useState("提示Info")
  const [modalMessage, setModalMessage] = useState("xxxxx 消息")
  const [modalOpen, setModalOpen] = useState(false)

  const openModal = (title, message) => {
    setModalTitle(title)
    setModalMessage(message)
    setModalOpen(true)
  }

  const closeModal = () => {
    setModalOpen(false)
  }


  return (
    <React.StrictMode>
      <SnackbarProvider maxSnack={3}>
        <EchoContext.Provider value={{ openModal, closeModal }}>
          <Router />
          <div>
            <BasicModal open={modalOpen} title={modalTitle} message={modalMessage}></BasicModal>
          </div>
        </EchoContext.Provider>
      </SnackbarProvider>

    </React.StrictMode>
  )
}

export default App1
